<template>
  <div class="order-detail" v-if="order.order">
    <card _Title="订单详情" :_Size="16"></card>

    <Card
      class="mb_10"
      v-if="
        order.allowOperationVO.pay ||
        order.allowOperationVO.rog ||
        order.allowOperationVO.cancel
      "
    >
      <Button
        type="success"
        @click="goPay(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.pay"
        >去支付</Button
      >
      <Button
        type="info"
        @click="received(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.rog"
        >确认收货</Button
      >
      <Button
        type="error"
        @click="handleCancelOrder(order.order.sn)"
        v-if="order.allowOperationVO.cancel"
        size="small"
        >取消订单</Button
      >
    </Card>

    <div class="order-card">
      <Steps
        class="progress"
        :current="progressList.length"
        direction="vertical"
      >
        <Step
          :title="progress.message"
          :content="progress.createTime + ' ' + progress.operatorType + ' ' + progress.operatorName"
          v-for="(progress, index) in progressList"
          :key="index"
        ></Step>
      </Steps>
    </div>

    <div class="content">
      <!-- 商品信息 -->
      <div class="goods-content">
        <div class="card-head mt_20 mb_20">
          <span>产品信息</span>
          <!--span @click="$router.push('/cart')">返回预订</span-->
          <Button @click="handleSubmit()" size="small" type="info" :disabled="orderLock">修改订单</Button>
        </div>
        <!-- 商品信息 -->
        <div class="goods-msg" >
          <div class="goods-list">
            <div class="goods-item" v-for="(goods, goodsIndex) in order.orderItems" :key="goodsIndex">
              <div class="goods-info" style="display: block; ">
                <span>
                  <img :src="pictureUrl(goods.image)" alt="" style="float: left;" />
                  <div style="float: left; margin-left: 10px;">
                    <div class="hover-color title" style="vertical-align: top; font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 730px;">
                      {{ goods.goodsName }}
                    </div>
                    <!--------------------------------------------------------------->
                    <div class="goods-list-info">
                      <p class="inlineblock">
                        <i class=" iconfont icon-yuandian"></i>
                        <span class="col9">出团日期：</span><em id="goDate">{{ goods.tourDate }}</em>
                      </p>
                      <p class="inlineblock">
                        <i class=" iconfont icon-yuandian"></i>
                        <span class="col9">出行人数：</span>
                        <em id="adultNum">{{ goods.num }}</em> 成人
                        <i style="margin-right: 10px;">,</i>
                        <span id="child" ><em id="childNum">{{ goods.childNum }}</em> 儿童</span>
                      </p>
                      <p class="inlineblock w150px">
                        <span>审核状态：</span>
                        <span class="orderStatus" :class="statusColor(order.order.orderStatus)">{{filterOrderStatus(order.order.orderStatus)}}</span>
                      </p>
                    </div>
                    <div class="goods-list-info">
                      <p class="inlineblock">
                        <span>订单编号：</span>
                        <span style="color:#333; font-size: 14px;">{{order.order.sn}}</span>
                      </p>
                      <p class="inlineblock">
                        <span>下单日期：</span>
                        <span style="color:#333; font-size: 14px;">{{goods.createTime}}</span>
                      </p>
                      <p class="inlineblock w150px">
                        <span class="col9">出发城市：</span>
                        <em>{{ goods.groupSchepost }}</em>
                      </p>
                    </div>
                    <!-- 优惠券展示 -->
                    <div class="n4" style="width: 350px; margin-top: 9px;">
                      <p class="Ellipsis">
                        <span class="item-price-title">优惠</span><i>：</i>
                        <span class="item-coupon">
                          <span class="label">同行优惠</span> <span>{{ goods.priceVip }}元/人</span>
                        </span>
                        <span class="item-coupon">
                          <span class="label">会员优惠</span> <span>{{ goods.priceRoom }}元/人</span>
                        </span>
                      </p>
                    </div>
                    <!------>
                  </div>
                </span>
                <!--label v-if="goodsType === 'TOUR_GOODS'">
                  <span style="margin-right: 20px;">{{ goods.num || 0 }}成人 x {{ goods.goodsSku.price | unitPrice("￥") }}</span>
                  <span v-if="goods.childNum > 0">{{ goods.childNum || 0 }}儿童 x {{ goods.goodsSku.priceChild | unitPrice("￥") }}</span>
                </label>
                <label v-else>
                  <span class="goods-price">{{ goods.purchasePrice | unitPrice("￥") }}</span>
                  <span>x{{ goods.num }}</span>
                  <span>{{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}</span>
                </label-->
              </div>

              <ul class="supplement">
                <li class="supplement_tit">
                  <span>名称</span>
                  <span>单价</span>
                  <span>单位</span>
                  <span>数量</span>
                  <span>小计</span>
                </li>
                <li class="supplement_text">
                  <span>成人</span>
                  <span>{{ goods.goodsPrice | unitPrice("￥") }}</span>
                  <span>元/人</span>
                  <span>
                    <!--em id="num_reduce" @click="handleReduce('adult')">-</em>
                    <strong id="num">{{ goods.num || 0 }}</strong>
                    <em id="num_plus" @click="handleAdd('adult')">+</em-->
                    <InputNumber
                      :min="1"
                      size="small"
                      controls-outside
                      autocomplete="off"
                      style="width: 100px; text-align: right;"
                      v-model="goods.num"
                      :readonly="orderLock"
                    ></InputNumber>
                  </span>
                  <span class="col48" id="singleTotalPrice">{{ (goods.num || 0) * goods.goodsPrice | unitPrice("￥") }}</span>
                </li>
                <li class="supplement_text">
                  <span>儿童</span>
                  <span>{{ goods.childPrice | unitPrice("￥") }}</span>
                  <span>元/人</span>
                  <span>
                    <!--em id="num_reduce" @click="handleReduce('child')">-</em>
                    <Input type="text" min="0" size="small" id="childNum" onblur="CheckStock()" :value="goods.childNum || 0" style="width: 50px; text-align: center;"/>
                    <em id="num_plus" @click="handleAdd('child')">+</em-->
                    <InputNumber
                      :min="0"
                      size="small"
                      controls-outside
                      autocomplete="off"
                      style="width: 100px; text-align: right;"
                      v-model="goods.childNum"
                      :readonly="orderLock"
                    ></InputNumber>
                  </span>
                  <span class="col48" id="singleTotalPrice">{{ (goods.childNum || 0) * goods.childPrice | unitPrice("￥") }}</span>
                </li>
                <li class="supplement_text">
                  <span>增项</span>
                  <span style="width: 200px; padding-left: 10px;">
                    <Input type="text" v-model.lazy="goods.addPrice" placeholder="金额" style="width: 100px;" :readonly="orderLock"/>
                  </span>
                  <span style="width: 400px; padding-left: 40px;">
                    <Input type="text" v-model="goods.addMark" placeholder="说明" style="width: 400px;" :readonly="orderLock"/>
                  </span>
                </li>
                <li class="supplement_text">
                  <span>减项</span>
                  <span style="width: 200px; padding-left: 10px;">
                    <Input type="text" v-model.lazy="goods.subPrice" placeholder="金额" style="width: 100px;" :readonly="orderLock"/>
                  </span>
                  <span style="width: 400px; padding-left: 40px;">
                    <Input type="text" v-model="goods.subMark" placeholder="说明" style="width: 400px;" :readonly="orderLock"/>
                  </span>
                </li>
              </ul>

            </div>
          </div>

          <div class="goods-bottom">
            <div class="order-mark">
              <Input type="textarea" maxlength="100" v-model="order.order.remark" show-word-limit placeholder="订单备注" :rows="6" height="100" :readonly="orderLock"/>
              <span style="font-size: 12px; color: #999">
                <!-- 提示：请勿填写有关支付、收货、发票方面的信息 -->
              </span>
            </div>

            <!-- 订单价格 -->
            <div class="order-price">
              <div>
                <span>团款金额：</span><span class="green">{{ priceDetailDTO.goodsPrice | unitPrice("￥") }}</span>
              </div>
              <div>
                <span>增项金额：</span><span class="green">{{ priceDetailDTO.addPrice | unitPrice("￥") }}</span>
              </div>
              <div v-if="priceDetailDTO.freightPrice > 0">
                <span>运费：</span><span>{{ priceDetailDTO.freightPrice | unitPrice("￥") }}</span>
              </div>
              <div>
                <span>优惠金额：</span><span class="red">-{{ priceDetailDTO.discountPrice | unitPrice("￥") }}</span>
              </div>
              <div v-if="priceDetailDTO.couponPrice > 0">
                <span>优惠抵券：</span><span>-{{ priceDetailDTO.couponPrice | unitPrice("￥") }}</span>
              </div>
              <div>
                <span>减项金额：</span>
                <span class="red" v-if="priceDetailDTO.subPrice > 0">-{{ priceDetailDTO.subPrice | unitPrice("￥") }}</span>
                <span class="red" v-else>{{ priceDetailDTO.subPrice | unitPrice("￥") }}</span>
              </div>
              <div v-if="$route.query.way === 'POINTS'">
                <span>应付积分：</span><span class="actrual-price">{{ priceDetailDTO.payPoint }}</span>
              </div>
              <div v-else>
                <span>应付金额：</span><span class="actrual-price">{{ priceDetailDTO.flowPrice | unitPrice("￥") }}</span>
              </div>
            </div>
            <!-- 订单价格 -->
          </div>
        </div>
      </div>

      <!-- 优惠券 
      <div class="invoice" v-if="couponList.length > 0">
        <div class="card-head mt_20 mb_20">
          <span class="relative">优惠券</span>
        </div>
        <div v-if="couponList.length === 0">无可用优惠券</div>
        <ul v-else class="coupon-list">
          <li v-for="(item, index) in couponList" class="coupon-item" :key="index">
            <div class="c-left">
              <div>
                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{ tem.price | unitPrice }}</span></span>
                <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{ item.discount }}</span>折</span>
                <span class="describe">满{{ item.consumeThreshold }}元可用</span>
              </div>
              <p>使用范围：{{ useScope(item.scopeType) }}</p>
              <p>有效期：{{ item.endTime }}</p>
            </div>
            <img class="used" v-if="usedCouponId.includes(item.id)" src="~@/assets/images/geted.png" alt="" />
            <b></b>
            <a class="c-right" @click="useCoupon(item.id, true)">立即使用</a>
            <a class="c-right" v-if="usedCouponId.includes(item.id)" @click="useCoupon(item.id, false)">放弃优惠</a>
            <i class="circle-top"></i>
            <i class="circle-bottom"></i>
          </li>
        </ul>
      </div>-->

      <!-- 游客信息 -->
      <div class="visitors" >
        <div class="card-head mt_20">
          <span class="relative">游客信息</span>
          <Button @click="handleVisitorsDelete()" size="small" type="info" :disabled="orderLock">删除信息</Button>
        </div>
        <div class="visitors-content">
          <vxe-table
            border
            size="small" 
            resizable
            keep-source
            show-overflow
            ref="xTable"
            :data="visitors"
            :edit-config="{trigger: orderLock ? '' : 'click' , mode: 'cell', showStatus: true, icon: 'vxe-icon-edit'}"
            :edit-rules="validRules"
            @edit-closed="editClosedEvent"
          >
            <vxe-column type="checkbox" width="40" align="center"></vxe-column>
            <vxe-column type="seq" width="50" align="center"></vxe-column>
            <vxe-column field="name" title="姓名" width="130" :edit-render="{autofocus: '.vxe-input--inner', placeholder: '请点击输入姓名'}">
              <template #edit="{ row }">
                <vxe-input v-model="row.name" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="type" title="证件类型" width="120" :edit-render="{autofocus: '.vxe-input--inner'}">
              <template #default="{ row }">
                <span>{{ formatCertType(row.type) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.type" transfer>
                  <vxe-option v-for="item in certList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="number" title="证件号" width="250" align="center" :edit-render="{autofocus: '.vxe-input--inner', placeholder: '请点击输入证件号'}">
              <template #edit="{ row }">
                <vxe-input v-model="row.number" type="text"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="sex" title="性别" width="80" align="center" :edit-render="{}">
              <template #default="{ row }">
                <span>{{ formatSex(row.sex) }}</span>
              </template>
              <template #edit="{ row }">
                <vxe-select v-model="row.sex" transfer >
                  <vxe-option v-for="item in sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
                </vxe-select>
              </template>
            </vxe-column>
            <vxe-column field="age" title="年龄" width="80" align="center" :edit-render="{autofocus: '.vxe-input--inner'}">
              <template #edit="{ row }">
                <vxe-input v-model="row.age" type="text" ></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="tel" title="联系电话"  width="140" :edit-render="{autofocus: '.vxe-input--inner'}">
              <template #edit="{ row }">
                <vxe-input v-model="row.tel" type="text" transfer></vxe-input>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <!-- 游客信息 -->
    </div>
  </div>
</template>
<script>
import { orderDetail, getTraces, sureReceived, cancelOrder, modify} from "@/api/order.js";
import { staticUrl } from '@/plugins/request';
import { getAgeByIdCard, getSexByIdCard, IdentityCode_isCardNo } from '@/plugins/IdCard.js';
import { visitorCache, visitorList, visitorSave, visitorDelete } from "@/api/visitor.js";
import { orderStatusList, tourStatusList } from '../enumeration.js'
import { afterSaleReason } from "@/api/member";
export default {
  name: "order-detail",
  data() {
    const numberValid = ({ cellValue, row }) => {
      // 模拟服务端校验
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (row.type == '1' && !IdentityCode_isCardNo(cellValue)) {
            reject(new Error('身份证号码格式不正确！'))
          } else {
            resolve()
          }
        }, 100)
      })
    }
    return {
      order: {}, // 订单详情数据
      progressList: [], // 订单流程
      logistics: "", // 物流数据
      cancelParams: {
        // 取消售后参数
        orderSn: "",
        reason: "",
      },
      cancelAvail: false, // 取消订单modal控制
      cancelReason: [], // 取消订单原因

      // qindl 2024-07-10 新增---------------------------
      priceDetailDTO: {}, // 商品价格
      visitors: [],
      skuList: [],
      addRemark: '',
      // 状态数组
      orderStatusList,
      tourStatusList,
      payFrom: {
        addPrice: 100.0,
        subPrice: 500,
        addMark: '100',
        subMark: '500'
      },
      // 当前状态
      orderEditLock: false,
      //------游客信息-------------
      certList: [
        { label: '身份证', value: '1' },
        { label: '护照', value: '2' },
        { label: '军官证', value: '3' },
        { label: '港澳通行证', value: '4' },
        { label: '台湾通行证', value: '5' },
        { label: '台胞证', value: '6' },
        { label: '回乡证', value: '7' }
      ],
      sexList: [
        { label: '女', value: '0' },
        { label: '男', value: '1' }
      ],
      validRules: {
        name: [
          { required: true, message: '请输入', trigger: 'change' },
        ],
        number: [
          { required: true, message: '请输入', trigger: 'change' },
          { validator: numberValid }
        ],
        tel: [
          { required: true, message: '请输入', trigger: 'change' },
        ],
      }
    };
  },
  computed: {
    // 产品详情
    orderLock () {
      var status = this.order.order.orderStatus || '';
      if (status == 'TAKE') {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    goodsDetail(skuId, goodsId) {
      // 跳转商品详情
      let routeUrl = this.$router.resolve({
        path: "/goodsDetail",
        query: { skuId, goodsId },
      });
      window.open(routeUrl.href, "_blank");
    },
    // 跳转店铺首页
    shopPage(id) {
      let routeUrl = this.$router.resolve({
        path: "/Merchant",
        query: { id: id },
      });
      window.open(routeUrl.href, "_blank");
    },
    getDetail() {
      // 获取订单详情
      orderDetail(this.$route.query.sn).then((res) => {
        if (res.success) {
          this.order = res.result;
          this.priceDetailDTO = res.result.order.priceDetailDTO;
          this.progressList = res.result.orderLogs;
          this.skuList = res.result.orderItems || [];
          this.visitors = res.result.orderVisitors || [];

          if (this.order.order.deliveryMethod === 'LOGISTICS') {
            this.traces();
          }

          let skuList = this.skuList && this.skuList[0];
          if (skuList && skuList.goodsSku) {
            //this.goodsType = skuList.goodsSku.goodsType;
          }
          // 游客列表 qindl 2024-07-03------------------------
          var num       = skuList.num;
          var childNum  = skuList.childNum;
          var length    = childNum + num;
          var orderSn   = this.order.order.sn;
   
          for (var i = this.visitors.length; i < length; i++) {
            this.visitors.push({
              id: '',
              name: '',
              type: '1',
              number: '',
              sex: '0',
              age: '',
              tel: '',
              orderSn: orderSn,
              key: (i+1),
            })
          }
          //console.info(this.visitors)
        }
      });
    },
    traces() {
      // 物流信息
      getTraces(this.$route.query.sn).then((res) => {
        if (res.success) {
          this.logistics = res.result;
        }
      });
    },
    received(sn) {
      // 确认收货
      sureReceived(sn).then((res) => {
        if (res.success) {
          this.$Message.success("确认收货成功");
          this.getDetail();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    goPay(sn) {
      // 去支付
      this.$router.push({
        path: "/payment",
        query: { orderType: "ORDER", sn },
      });
    },
    applyAfterSale(sn) {
      // 申请售后
      this.$router.push({ name: "ApplyAfterSale", query: { sn: sn } });
    },
    comment(sn, goodsIndex) {
      // 评价
      this.$router.push({
        path: "/home/addEval",
        query: { sn, index: goodsIndex },
      });
    },
    complain(sn, goodsIndex) {
      // 投诉
      this.$router.push({ name: "Complain", query: { sn, index: goodsIndex } });
    },
    handleCancelOrder(sn) {
      // 取消订单
      this.cancelParams.orderSn = sn;
      afterSaleReason("CANCEL").then((res) => {
        if (res.success) {
          this.cancelReason = res.result;
          this.cancelAvail = true;
          this.cancelParams.reason = this.cancelReason[0].reason;
        }
      });
    },
    sureCancel() {
      // 确定取消
      cancelOrder(this.cancelParams).then((res) => {
        if (res.success) {
          this.$Message.success("取消订单成功");
          this.getDetail();
          this.cancelAvail = false;
        }
      });
    },

    //------------------------------------------------

    filterOrderStatus (status) { // 获取订单状态中文
      const ob = this.tourStatusList.filter(e => { return e.status === status });
      return ob && ob[0] ? ob[0].name : status
    },
    
    statusColor (status) {
      const ob = this.tourStatusList.filter(e => { return e.status === status });
      return ob && ob[0] ? ob[0].color : status
    },

    pictureUrl(path) {
      if (!path) {
        return '';
      } else if (path.indexOf("photos/") >= 0) {
        return staticUrl + "/" + path
      } else {
        return path
      }
    },

    // 设置购买数量
    changeNum(val, cal, id) {
      if (val) {
        setCartGoodsNum({ skuId: id, num: val, childNum: cal }).then((res) => {
          if (res.success) {
            this.getDetail();
          }
        });
      }
    },

    isNumber(value) {
      return /^-?\d+(\.\d+)?$/.test(value);
    },

    // 增项金额
    changeItemPriceBlur(add, sub, id) {
      //console.info("this.addRemark", add);
      if (!id) {
        return
      }

      if (add && !this.isNumber(add)) {
        this.$Message.warning("填入的增项金额无效！" + add + ", " + this.isNumber(add));
        return
      }

      if (sub && !this.isNumber(sub)) {
        this.$Message.warning("填入的减项金额无效！" + sub);
        return
      }
       
      setCartItemPrice({ skuId: id, add: add, sub: sub }).then((res) => {
        if (res.success) {
          this.getDetail();
        }
      });
    },

    // 增项金额
    changeItemMarkBlur(addMark, subMark, id) {
      //console.info("this.addRemark", addMark);
      if (!id) {
        return
      }

      var params = { 
        skuId: id, addMark: addMark, subMark: subMark
      }

      setCartItemMark(params).then((res) => {
        if (res.success) {
          this.getDetail();
        }
      });
    },

  //表单提交事件 2024-09-29 qindl
  async handleSubmit() {
    try {
      let order = this.order.order;
      let goods = this.order.orderItems && this.order.orderItems[0];
      let values = {
        skuId: goods.id,
        orderSn: order.sn,
        goodsPrice: goods.goodsPrice,
        num: goods.num,
        childPrice: order.childPrice,
        childNum: goods.childNum,
        priceVip: goods.priceVip,
        priceRoom: goods.priceRoom,
        addPrice: goods.addPrice || 0.00,
        addMark: goods.addMark || '',
        subPrice: goods.subPrice || 0.00,
        subMark: goods.subMark || '',
        remark: order.remark
      } ;

      await modify(values.orderSn, values).then((res) => {
        if (res.success) {
          this.$Message.success("订单修改成功！");
          this.getDetail();
        } else {
          this.$Message.warning(res.message);
        }
      });
    } catch (e) {
      console.log(e);
    } finally {
      //setModalProps({confirmLoading: false});
    }
  },

    //--------------------------------------------------------
    formatCertType (value) {
      var text = ''
      switch (value) {
        case '1':
          text = '身份证'
          break;
        case '2':
          text = '护照'
          break;
        case '3':
          text = '军官证'
          break;
        case '4':
          text = '港澳通行证'
          break;
        case '5':
          text = '台湾通行证'
          break;
        case '6':
          text = '台胞证'
          break;
        case '7':
          text = '回乡证'
          break;
      }
      return text;
    },

    formatSex (value) {
      if (value == '0') {
        return '女'
      } else if (value == '1') {
        return '男'
      } else {
        return ''
      }
    },

    async editClosedEvent ({ row, column }) {
      const $table = this.$refs.xTable
      const field = column.field

      if (field == 'number' && row['type'] == '1' && row[field] && (row[field].length == 15 || row[field].length == 18)) {
        row['sex'] = getSexByIdCard(row[field]) || ''
        row['age'] = getAgeByIdCard(row[field]) || ''
      } 

      if (field == 'type' && row['type'] != '1') {
        row['number'] = ''
        row['sex'] = ''
        row['age'] = '' 
      }

      if (row.type == '1' && !!row['number'] && !IdentityCode_isCardNo(row['number'])) {
        this.$Message.error('身份证号码，格式不正确！');
        return false;
      } 

      var k = false;
      for(var i = 0; this.visitors.length > i; i++) {
        if (row.number && this.visitors[i].number == row.number && (i+1 != row.key) && this.visitors[i].id != row.id) {
          console.info(row.number, this.visitors[i].number, i+1, row.key, i+1 != row.key);
          k = true;
          break;
        }
      }

      if (k) {
        this.$Message.error('身份证号码，已重复录入！');
        return false;
      }

      await $table.validate(false);

      //console.info("editClosedEvent", row, field, row[field], getSexByIdCard(row[field]));
      // 判断单元格值是否被修改
      if ($table.isUpdateByRow(row, field)) {
        setTimeout(() => {
          // VXETable.modal.message({
          //   content: `局部保存成功！ ${field}=${cellValue}`,
          //   status: 'success'
          // })
          // 局部更新单元格为已保存状态 
          $table.reloadRow(row, null, field);
          this.handlerVisitor(row);
        }, 300)
      }
    },

    // 保存游客信息
    handlerVisitor(row) {
      var params = Object.assign({}, row);
      if (!params.name) {
        // this.$Message.error("游客姓名不能为空！");
        return false;
      }
      if (!params.number) {
        // this.$Message.error("游客证件号不能为空！");
        return false;
      }
      if (!params.tel) {
        // this.$Message.error("游客联系电话不能为空！");
        return false;
      }
      visitorSave(params).then(res => {
        if (res.success == true) {
          this.$Message.success("游客信息保存成功！");
          this.getDetail();
        } else {
          this.$Message.error(res.message);
        }
      });
    },

    handleVisitorsDelete() {
      //$table.removeCheckboxRow();
      const $table = this.$refs.xTable
      const selectRecords = $table.getCheckboxRecords()

      const ids = [];
      selectRecords.filter(function (e) {
        if (e.id) {
          ids.push(e.id);
        }
      })

      if (ids.length == 0) {
        return
      }

      var params = { ids: ids };
      this.$Modal.confirm({
        title: "删除",
        content: "<p>确定要删除游客信息吗？</p>",
        onOk: () => {
          visitorDelete(params).then((res) => {
            if (res.success) {
              this.$Message.success("删除成功");
              this.getDetail();
            } else {
              this.$Message.error(res.message);
            }
          });
        },
      });

    }


  },


  mounted() {
    this.getDetail();
  },
};
</script>
<style lang="scss" scoped>
.mb_10 {
  Button:nth-of-type(2) {
    margin-left: 10px;
  }
}

.mb_5 {
  margin-bottom: 5px;
}
.order-card {
  padding: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e8eaec;
  position: relative;
  .global_color {
    color: $theme_color;
  }
  p {
    color: #999;
    margin: 3px;
    margin-left: 5px;
  }
  h3 {
    font-weight: normal;
    font-size: 16px;
  }
  .operation-time {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}
/** 店铺名称 */
.shop-name {
  margin: 15px 0;
  span {
    color: #438cde;
    cursor: pointer;
    &:hover {
      color: $theme_color;
    }
  }
  .ivu-icon {
    color: #ff8f23;
    cursor: pointer;
    &:hover {
      color: $theme_color;
    }
  }
}
/** 商品列表 */
table {
  border: 1px solid #ddd;
  color: #999;
  border-collapse: collapse;
  width: 100%;
  tr {
    border-top: 1px solid #ddd;
  }
  thead > tr {
    height: 40px;
    background: #eee;
  }
  td {
    padding: 5px;
    text-align: center;
    &:first-child {
      text-align: left;
      display: flex;
      img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
        margin-left: 10px;
        cursor: pointer;
      }
    }
    &:last-child {
      color: $theme_color;
    }
  }
}

/** 公共表头 */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dddddd;
  height: 40px;

  span:nth-child(1) {
    font-size: 18px;
  }

  span:nth-child(2) {
    font-size: 12px;
    color: #438cde;
    cursor: pointer;

    &:hover {
      color: $theme_color;
    }
  }
}

/** 订单价格 */
.order-price {
  text-align: right;
  margin-top: 30px;
  font-size: 16px;
  color: #999;
  > div {
    height: 25px;
    line-height: 25px;
    > span:nth-child(2) {
      width: 130px;
      text-align: right;
      display: inline-block;
      margin-top: 10px;
    }
  }
  .actrual-price {
    color: $theme_color;
    font-weight: bold;
    font-size: 20px;
  }
}
.verificationCode {
  font-size: 20px;
  margin-bottom: 20px;
  color: rgb(65, 63, 63);
  font-weight: bold;
  text-align: center;
  span {
    color: $theme_color;
  }
}
/** 订单进度条 */
.progress {
  margin: 15px 0;
}

/** 预定信息 */
.goods-list {
  background-color: #f8f8f8;
  margin: 10px 0;
  width: 100% !important;

  &:hover {


  }

  .goods-item {
    width: 100%;
    padding: 10px 0;
    margin: 0 10px;

    .goods-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100px;
      &:hover .title {
        color: $theme_color !important;
        cursor: pointer;
      }
    }

    .inlineblock {
      display: inline-block;
      margin-right: 15px;
      margin-top: 5px;
    }

    img {
      width: 100px;
      height: 70px;
    }

    >span {
      text-align: center;
      width: 100px;
    }

    >span:nth-child(1) {
      font-size: 12px;

      flex: 1;
      text-align: left;

      >span {
        margin-left: 10px;
      }
    }

    >span:last-child {
      color: $theme_color;
      font-weight: bold;
    }

    .goods-price {
      font-size: 16px;
    }

    .Ellipsis {
      height: 22px;
      line-height: 22px;

      .item-price-title {
        display: inline-block;
        width: 46px;
        text-align: justify;
        justify-content: space-between;
        text-align-last: justify;
      }

      i {
        margin-left: 2px;
        margin-right: 0px;
      }

      .item-coupon {
        margin-right: 10px;
        color: #333;
        font-size: 14px;
        .label {
          font-size: 12px;
        }
      }
    }

    .goods-list-info {
      margin-top: 7px;
      .inlineblock {
        display: inline-block;
        margin-right: 20px;
        width: 205px;
      }
      em, i {
        font-style: normal;
        color: #000;
        font-size: 14px;
      }
      .w150px {
        width: 120px;
      }
      .orderStatus {
        font-size: 14px;
        font-weight: 600;
      }
    }
  }
}

/** 预定表单 */
.supplement {
  width: 100%;
  display: block;
  margin-top: 5px;
}

.supplement .supplement_tit {
  background: #f9f9f9;
  height: 40px;
}

.supplement_text {
  border: 2px solid #f9f9f9;
  background: #fff;
  height: 40px;
}

.supplement li span {
  width: 20%;
  float: left;
  text-align: center;
}

.supplement_tit span {
  line-height: 40px;
  color: #666;
  font-size: 12px;
  font-weight: 600;
}

.supplement_text span {
  line-height: 35px;
  font-size: 12px;
}

.supplement .supplement_text .unsed {
  color: #b8b8b8;
}

.supplement_text em {
  border-radius: 50%;
  border: 1px solid #eee;
  margin: 0 10px;
  display: inline-block;
  font-size: 18px;
  text-align: center;
  height: 22px;
  width: 22px;
  line-height: 17px;
  cursor: pointer;
  color: #ea1a56;
}

.supplement .supplement_text .unsed:hover {
  border: 1px solid #eee;
}

.supplement .supplement_text .unsed {
  color: #b8b8b8;
}

.supplement_text em:hover {
  border: 1px solid #ff0048;
}

.goods-bottom {
  margin-top: 10px;
  height: 140px;

  .order-mark {
    width: 490px;
    float: left;
    margin-left: 2px;
  }

  /** 订单价格 */
  .order-price {
    text-align: right;
    width: 380px;
    float: left;
    font-size: 16px;
    color: #666;
    margin-left: 10px;
    margin-top: -8px;
    margin-bottom: 8px;

    >div>span{
      height: 25px;
      line-height: 25px;
      display: inline-block;
      margin-top: 3px;
    }

    >div>span:nth-child(2) {
      width: 130px;
      text-align: right;
      color: #333;
    }

    .actrual-price {
      color: $theme_color !important;
      font-weight: bold;
      font-size: 20px;
    }
  }
}

/** 游客信息 */
.visitors {

}
</style>
